<template>
  <!-- vue2模板 -->
  <div>
    <h3> title: {{ title }}</h3>
    <h3> store.state :{{ $store.state.count }}</h3>
    <h3> store: {{ $store.state.num }}</h3>
    <h3> computed: {{ reversedMessage }}</h3>
    <h3> computed: {{ getTofixed }}</h3>
    <button @click="increment">修改count</button>
    <button @click="getTofixed">修改num</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex' //辅助函数
export default {
  name: 'Test',
  components: {},
  data () {
    return {
      title: "vuex",
    };
  },
  props: {

  },
  mounted () {

  },
  // computed: mapGetters(['getTofixed']), //组件computed只有vuex的
  //组件computed vuex 都有
  computed: {
    ...mapGetters(['getTofixed']),
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.title.split('').reverse().join('')
    }
  },

  methods: {
    ...mapActions(['increment'])
    // modify () {
    //   this.$store.dispatch("increment")
    // }
  },
};
</script>

<style scoped>

</style>
